<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="gotohome()">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
    <ion-title>inputs</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <ion-segment (ionChange)="segmentChanged($event)">
      <ion-segment-button value="input" checked>
        <ion-label>ion-input</ion-label>
      </ion-segment-button>
      <ion-segment-button value="textarea">
        <ion-label>ion-textarea</ion-label>
      </ion-segment-button>
    </ion-segment>

    <div [ngSwitch]="pet">
      <div *ngSwitchCase="'input'">
         <h3>属性</h3>
         <div>
         <p>autofocus="true" (当为true时，页面加载之后自动获取焦点)</p>
         <ion-list>
            <ion-item>
              <ion-label position="fixed">用户名</ion-label>
              <ion-input type="text" value="" autofocus="true"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label position="fixed">密码</ion-label>
              <ion-input type="password"></ion-input>
            </ion-item>
         </ion-list>
        </div>
        <div>
          <p>clearInput="true" (当为true时，输入时会出现一个清除按钮)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="" clearInput="true"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="fixed">密码</ion-label>
                <ion-input type="password" clearInput="true"></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <div>
          <p>clearOnEdit="true"  (如果为true，则在编辑焦点后将清除该值。 当type为“password”时默认为true，所有其他类型则默认为false)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="" clear-on-edit="true"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="fixed">密码</ion-label>
                <ion-input type="password"></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <div>
          <p>color (颜色设置)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="" color="success"></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="fixed">密码</ion-label>
                <ion-input type="password" color="warning"></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <div>
          <p>disabled="true" (当为true时，用户无法与表单交互)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="" ></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="fixed">密码</ion-label>
                <ion-input type="password" disabled="true"></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <div>
          <p>placeholder (设置输入框默认值)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="" placeholder="请输入用户名" ></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <div>
          <p>value (设置输入框中的内容)</p>
          <ion-list>
              <ion-item>
                <ion-label position="fixed">用户名</ion-label>
                <ion-input type="text" value="yuanxin" ></ion-input>
              </ion-item>
              <ion-item>
                <ion-label position="fixed">密码</ion-label>
                <ion-input type="password" value="yuanxin" ></ion-input>
              </ion-item>
           </ion-list>
        </div>
        <h3>事件</h3>
        <div>
            <p>该组件事件一共有4个, ionBlur(输入失去焦点时触发), ionChange(值改变时触发), ionFocus(具有焦点时触发), ionInput(输入时触发)</p>
            <ion-list>
                <ion-item>
                  <ion-label position="fixed">用户名</ion-label>
                  <ion-input type="text" value="" (ionBlur)="eventBlur()" (ionChange)="eventChange()" (ionFocus)="eventFocus()" (ionInput)="eventInput()" ></ion-input>
                </ion-item>
                <ion-item>
                  <ion-label position="fixed">密码</ion-label>
                  <ion-input type="password" ></ion-input>
                </ion-item>
             </ion-list>
          </div>
      </div>
      <div *ngSwitchCase="'textarea'">
         <h3>属性</h3>
         <div>
            <p>autofocus="true" (当为true时，页面加载之后自动获取焦点)</p>
            <ion-item>
                <ion-label position="stacked">内容</ion-label>
                <ion-textarea autofocus="true"></ion-textarea>
            </ion-item>
         </div>
         <div>
           <p>color="primary" | "secondary" | "tertiary" | "success"... (设置颜色)</p>
           <ion-item>
              <ion-label position="stacked">内容</ion-label>
              <ion-textarea color="success"></ion-textarea>
           </ion-item>
         </div>
         <div>
           <p>disabled="true" (当为true时，用户无法与表单进行交互)</p>
           <ion-item>
              <ion-label position="stacked">内容</ion-label>
              <ion-textarea disabled="true"></ion-textarea>
           </ion-item>
         </div>
         <div>
           <p>placeholder (设置表单的默认值)</p>
           <ion-item>
              <ion-label position="stacked">内容</ion-label>
              <ion-textarea placeholder="请输入内容"></ion-textarea>
           </ion-item>
         </div>
         <div>
           <p>readonly="true" (当为true时，用户无法修改表单的值)</p>
           <ion-item>
              <ion-label position="stacked">内容</ion-label>
              <ion-textarea readonly="true" value="这里的值无法修改"></ion-textarea>
           </ion-item>
         </div>
         <h3>事件</h3>
         <div>
            <p>该组件事件一共有4个, ionBlur(输入失去焦点时触发), ionChange(值改变时触发), ionFocus(具有焦点时触发), ionInput(输入时触发)</p>
            <ion-item>
                <ion-label position="stacked">内容</ion-label>
                <ion-textarea placeholder="请输入内容" (ionBlur)="eventBlur()" (ionChange)="eventChange()" (ionFocus)="eventFocus()" (ionInput)="eventInput()"></ion-textarea>
            </ion-item>
         </div>   
      </div>
    </div>
</ion-content>
